* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(to bottom, #1e405a, #83b2d9);
}
.container {
  /* 弹性布局 水平排列 */
  display: flex;
}
.card-box {
  /* 设置视距 */
  perspective: 1000px;
  margin: 0 25px;
}
.card-box .card {
  width: 200px;
  height: 290px;
  position: relative;
  /* 保持原有尺寸比例，裁切长边 */
  background-size: cover;
  /* 设置背景图的起始位置：中上 */
  background-position: center top;
  /* 背景不平铺 */
  background-repeat: no-repeat;
  /* 设置变换基点：中下 */
  transform-origin: center bottom;
  /* 开启3D */
  transform-style: preserve-3d;
  /* 过渡效果 */
  transition: transform 1s;
}
/* 为每一个卡片设置背景图片 */
.card-box:nth-child(1) .card {
  background-image: url('/images/160/1.jpg');
}
.card-box:nth-child(2) .card {
  background-image: url('/images/160/2.jpg');
}
.card-box:nth-child(3) .card {
  background-image: url('/images/160/3.jpg');
}
/* 标题区域 */
.card-box .title {
  width: 100%;
  height: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 290px;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* 设置变换基点：中上 */
  transform-origin: center top;
  /* 默认沿X轴旋转-90度 */
  transform: rotateX(-90deg);
}
/* 为每一个卡片的标题区域设置背景图片 */
.card-box:nth-child(1) .title {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
    url('/images/160/1.jpg');
}
.card-box:nth-child(2) .title {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
    url('/images/160/2.jpg');
}
.card-box:nth-child(3) .title {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
    url('/images/160/3.jpg');
}
/* 投影 */
.card-box .card::before {
  content: '';
  width: 100%;
  height: 100%;
  box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 10px;
  transform-origin: center bottom;
  transform: rotateX(95deg) translateZ(-50px) scale(0.75);
  transition: 1s;
}
/* 鼠标悬停改变样式 */
.card-box:hover .card {
  transform: rotateX(75deg) translateZ(40px);
}
.card-box:hover .card::before {
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.3), inset 0 0 250px 250px rgba(0, 0, 0, 0.3);
  transform: rotateX(-5deg) translateZ(-50px) scale(0.9);
}
